<template>
        <div class="uploadMode">
            <section id="upLoadInfo" class="wrap">
                
                <div class="upLoadList clearfix">
                    <div class="listLeft">
                        <p class="modeInfo">
                            <label>方案名称：</label>
                            <input placeholder="请输入概念方案名称" type="text" v-model="modeName" maxlength="20">
                        </p>
                        <div class="modeInfo" @mouseover="modifyOver" @mouseout="modifyOut">
                            <label>方案文件：</label>
                            <div class="form-group aetherupload-wrapper"><!--组件最外部需要有一个名为aetherupload-wrapper的id，用以包装组件-->
                                <div class="controls">
                                    <input type="file" class="uploadeModeFile file" onchange="aetherupload(this,'model').success(someCallback).upload()" accept=".rar,.zip"><!--需要有一个名为file的id，用以标识上传的文件，aetherupload(file,group)中第二个参数为分组名，success方法可用于声名上传成功后的回调方法名-->
                                    <div class="progress" style="height:37px;margin-bottom: 2px;margin-top: 10px;">
                                        <div class="progressbar" style="background-color:#ea514b;height:37px;width:0;"></div><!--需要有一个名为progressbar的id，用以标识进度条-->
                                    </div>
                                    <span style="font-size:12px;color:#aaa;" class="output"></span><!--需要有一个名为output的id，用以标识提示信息-->
                                    <input type="hidden" name="file1" class="savedpath gnPackageFile" id="packageFileSize" fileSize=""><!--需要有一个名为savedpath的id，用以标识文件保存路径的表单字段，还需要一个任意名称的name-->
                                    <div class="progressBox">
                                        <div class="progressBoxChild" :style="{width:imageUrl}">{{imageName}}<i v-if="successShow" class="imgSuccess"></i></div>
                                        <div class="modify" v-if="modify">点击修改</div>
                                    </div>
                                </div>
                            </div>
                            
                            
                            <div class="fileStart">
                                {{defaultImgName}}
                            </div>
                        </div>
                        
                        <p class="designBox clearfix">
                            <label> 预览图：</label>
                            <ul>
                                <li>
                                    <div class="form-group aetherupload-wrapper gnImgBox"><!--组件最外部需要有一个名为aetherupload-wrapper的id，用以包装组件-->

                                    <div class="angleBox">
                                        <img src="" alt="">
                                        <i @click="hide(0)"></i>
                                    </div>
                                        <div class="controls">
                                            <input type="file" class="uploadeModeFile file" onchange="aetherupload(this,'image').success(someCallback).upload()" accept="image/jpeg,image/jpg,image/png"><!--需要有一个名为file的id，用以标识上传的文件，aetherupload(file,group)中第二个参数为分组名，success方法可用于声名上传成功后的回调方法名-->
                                            <div class="progress" style="height:37px;margin-bottom: 2px;margin-top: 10px;">
                                                <div class="progressbar" style="background-color:#ea514b;height:37px;width:0;"></div><!--需要有一个名为progressbar的id，用以标识进度条-->
                                            </div>
                                            <!-- <span style="font-size:12px;color:#aaa;" id="output"></span>需要有一个名为output的id，用以标识提示信息 -->
                                            <input type="hidden" name="file1" class="savedpath gnImageName1"><!--需要有一个名为savedpath的id，用以标识文件保存路径的表单字段，还需要一个任意名称的name-->
                                            
                                        </div>

                                        <div class="avatar-uploader-icon uploadMainBox">
                                            <span class="uploadMain">上传主图</span>
                                            <span class="clickUpload clickUploadOne">点击上传</span>
                                        </div>
                                        <div class="uoloadProgressBox" style="display:none">
                                            <div class="uoloadProgress">
                                                <span  class="uoloadProgressChild progressBoxChild"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <p>预览图1</p>
                                </li>
                                <li>
                                    <div class="form-group aetherupload-wrapper gnImgBox"><!--组件最外部需要有一个名为aetherupload-wrapper的id，用以包装组件-->

                                    <div class="angleBox">
                                        <img src="" alt="">
                                        <i @click="hide(1)"></i>
                                    </div>
                                        <div class="controls">
                                            <input type="file" class="uploadeModeFile file" onchange="aetherupload(this,'image').success(someCallback).upload()" accept="image/jpeg,image/jpg,image/png"><!--需要有一个名为file的id，用以标识上传的文件，aetherupload(file,group)中第二个参数为分组名，success方法可用于声名上传成功后的回调方法名-->
                                            <div class="progress" style="height:37px;margin-bottom: 2px;margin-top: 10px;">
                                                <div class="progressbar" style="background-color:#ea514b;height:37px;width:0;"></div><!--需要有一个名为progressbar的id，用以标识进度条-->
                                            </div>
                                            <!-- <span style="font-size:12px;color:#aaa;" id="output"></span>需要有一个名为output的id，用以标识提示信息 -->
                                            <input type="hidden" name="file1" class="savedpath gnImageName2"><!--需要有一个名为savedpath的id，用以标识文件保存路径的表单字段，还需要一个任意名称的name-->
                                            
                                        </div>

                                        
                                        <div class="avatar-uploader-icon uploadMainBox">
                                            <span class="clickUpload clickUploadOne">点击上传</span>
                                        </div>
                                        <div class="uoloadProgressBox" style="display:none">
                                            <div class="uoloadProgress">
                                                <span class="uoloadProgressChild"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <p>预览图2</p>
                                </li>
                                <li>
                                    <div class="form-group aetherupload-wrapper gnImgBox"><!--组件最外部需要有一个名为aetherupload-wrapper的id，用以包装组件-->

                                    <div class="angleBox">
                                        <img src="" alt="">
                                        <i @click="hide(2)"></i>
                                    </div>
                                        <div class="controls">
                                            <input type="file" class="uploadeModeFile file" onchange="aetherupload(this,'image').success(someCallback).upload()" accept="image/jpeg,image/jpg,image/png"><!--需要有一个名为file的id，用以标识上传的文件，aetherupload(file,group)中第二个参数为分组名，success方法可用于声名上传成功后的回调方法名-->
                                            <div class="progress" style="height:37px;margin-bottom: 2px;margin-top: 10px;">
                                                <div class="progressbar" style="background-color:#ea514b;height:37px;width:0;"></div><!--需要有一个名为progressbar的id，用以标识进度条-->
                                            </div>
                                            <!-- <span style="font-size:12px;color:#aaa;" id="output"></span>需要有一个名为output的id，用以标识提示信息 -->
                                            <input type="hidden" name="file1" class="savedpath gnImageName3"><!--需要有一个名为savedpath的id，用以标识文件保存路径的表单字段，还需要一个任意名称的name-->
                                            
                                        </div>

                                       
                                        <div class="avatar-uploader-icon uploadMainBox">
                                            <span class="clickUpload clickUploadOne">点击上传</span>
                                        </div>
                                        <div class="uoloadProgressBox" style="display:none">
                                            <div class="uoloadProgress">
                                                <span class="uoloadProgressChild"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <p>预览图3</p>
                                </li>
                                <li>
                                    <div class="form-group aetherupload-wrapper gnImgBox"><!--组件最外部需要有一个名为aetherupload-wrapper的id，用以包装组件-->

                                    <div class="angleBox">
                                        <img src="" alt="">
                                        <i @click="hide(3)"></i>
                                    </div>
                                        <div class="controls">
                                            <input type="file" class="uploadeModeFile file" onchange="aetherupload(this,'image').success(someCallback).upload()" accept="image/jpeg,image/jpg,image/png"><!--需要有一个名为file的id，用以标识上传的文件，aetherupload(file,group)中第二个参数为分组名，success方法可用于声名上传成功后的回调方法名-->
                                            <div class="progress" style="height:37px;margin-bottom: 2px;margin-top: 10px;">
                                                <div class="progressbar" style="background-color:#ea514b;height:37px;width:0;"></div><!--需要有一个名为progressbar的id，用以标识进度条-->
                                            </div>
                                            <!-- <span style="font-size:12px;color:#aaa;" id="output"></span>需要有一个名为output的id，用以标识提示信息 -->
                                            <input type="hidden" name="file1" class="savedpath gnImageName4"><!--需要有一个名为savedpath的id，用以标识文件保存路径的表单字段，还需要一个任意名称的name-->
                                            
                                        </div>

                                        
                                        <div class="avatar-uploader-icon uploadMainBox">
                                            <span class="clickUpload clickUploadOne">点击上传</span>
                                        </div>
                                        <div class="uoloadProgressBox" style="display:none">
                                            <div class="uoloadProgress">
                                                <span class="uoloadProgressChild"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <p>预览图4</p>
                                </li>
                            </ul>
                        </p>
                        <div class="selectBox">
                            <label>分类：</label>
                            <template>
                                <el-select v-model="gnSort" placeholder="分类选择" @change="gnDesignStyleChange">
                                    <el-option
                                    v-for="item in gnSortList"
                                    :key="item.id"
                                    :value="item.catname">
                                    </el-option>
                                </el-select>
                            </template>
                        </div>
                        <upload-explain :readColor="readColorMsg" @readColorFn="readColorFn"></upload-explain>
                        <div class="goUpload">
                            <el-button type="warning" :disabled="disTrue" @click="goUpload(user)">立即上传</el-button>
                        </div>
                    </div>
                    <list-right></list-right>
                </div>
            </section>
            
        </div>
</template>
<script>
import axios from 'axios'
export default {
    name:"uploadSu",
    props:["user"],
     data() {
      return {
          readColorMsg:true,
        //   readColor:true,//阅读按钮的状态
        //    uploadUrl : "https://jsonplaceholder.typicode.com/posts/",
           uploadUrl : "http://bug.tuozhe8.com/index.php/home/upload/upload_img",
           imageUrl: 0,//上传压缩包
           imageName: "",//压缩包名字
           defaultImgName: "点击上传文件附件压缩包",
           modify : false,//控制修改的显示隐藏
           successShow : false,//控制对勾的隐藏

         modeName:"",//模板名称
         gnSortList:[],//分类列表
         gnSort:"",//分类
         gnSortKey:"",//分ID
        disTrue:false,//禁止立即上传按钮
        
    }
  },
  methods: {
       readColorFn(){
          this.readColorMsg = !this.readColorMsg;
      },
      openMsg(content) {
        this.$message({
          message: content,
          type: 'error',
          customClass : 'errorMsg',
          duration : 1500,
          showClose : true
        });
      },
      goUpload(user){//立即上传按钮
        if(!this.modeName){//标题内容
            this.openMsg("请输入方案名称");
            return;
        }else if(!$(".gnPackageFile").val()){//未上传压缩包
            this.openMsg("请上传文件附件压缩包");
            return;
        }else if(!$(".gnImageName1").val()){//未上传主图
            this.openMsg("请上传主图");
            return;
        }else if(!this.gnSortKey){//模型风格
            this.openMsg("请选择分类");
            return;
        }else if(!this.readColorMsg){//阅读说明
            this.openMsg("请阅读上传说明");
            return;
        }
         var data = {//上传至后台需要的参数
            type:"4",
            user_id:user.id,
            title:this.modeName,
            file:$(".gnPackageFile").val(),
            filesize:$(".gnPackageFile").first().attr("fileSize"),
            image:$(".gnImageName1").val(),
            image2:$(".gnImageName2").val(),
            image3:$(".gnImageName3").val(),
            image4:$(".gnImageName4").val(),
            cat_id1:this.gnSortKey,
        };
        this.disTrue = true;
        axios.post('/data/uploadsave',data)
            .then( (response)=> {
               this.$message({
                        message: '恭喜你，上传成功',
                        type: 'success',
                        customClass : 'errorMsg',
                        duration : 1500,
                        showClose : true,
                        onClose : ()=>{
                            this.$router.go(0)
                        }
                    });
                
            })
            .catch((error)=> {
                this.openMsg("上传失败，请重试");
                this.disTrue = false;
                console.log(error)
            });  
      },
      gnDesignStyleChange(){//设计风格发生变化时
        var designStyleKeyArr =  this.gnSortList.filter((e)=>{
            return e.catname == this.gnSort;
        })
        this.gnSortKey = designStyleKeyArr[0].id;
      },
      //删除角度5图片
      hide(num){
          var $box = $($(".gnImgBox")[num])
        $box.find($(".angleBox")).css("z-index","0");
        $box.find($(".angleBox")).find("img").attr("src","");
        $box.find($(".uploadMainBox")).show();
      },
      //点击修改
      modifyOver(){
          if(this.successShow){
              this.modify = true;
          }
          
      },
      modifyOut(){
         this.modify = false; 
      },
      
    },
components:{
    listRight : resolve => require(["./listRight"], resolve),//右侧文字提示
    uploadExplain : resolve => require(["./uploadExplain"], resolve)//上传说明
},
beforeMount(){
    axios.get('/data/create/5')
        .then( (response)=> {
            this.gnSortList = response.data.cats[5];
        })
        .catch((error)=> {
            console.log(error)
        }); 
}
}
</script>
<style>
@import './upload.css';

</style>
